<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
</head>
<body>
<div id="example-2">
    <currency-input v-model="price"></currency-input>
</div>
<script src="vue.js"></script>
<script>
    Vue.component('currency-input', {
        template: '\
            <span>\
              $\
              <input\
                ref="input"\
                v-bind:value="value"\
                v-on:input="updateValue($event.target.value)"\
              >\
            </span>\
        ',
        props: {
            value:{
                defalt:"100"
            }
        },
        methods: {
            // 不是直接更新值，而是使用此方法来对输入值进行格式化和位数限制
            updateValue: function (value) {
                var formattedValue = value
                // 删除两侧的空格符
                    .trim()
                    // 保留 2 位小数
                    .slice(
                        0,
                        value.indexOf('.') === -1
                            ? value.length
                            : value.indexOf('.') + 3
                    );
                // 如果值尚不合规，则手动覆盖为合规的值
                if (formattedValue !== value) {
                    this.$refs.input.value = formattedValue
                }
                // 通过 input 事件带出数值
                this.$emit('input', Number(formattedValue))
            }
        }
    });
    var app = new Vue({
        el: '#example-2',
        data:{
            /*
                如果不定义price， 则会报如下错误
                [Vue warn]: Property or method "price" is not defined on the instance but referenced during render.
             */
            price:"10"
        }
    })
</script>
</body>
</html>